<template>
  <div>
    <input type="text" v-model="msg" />
    <p>{{ msg }}</p>
    <!-- <button @click="fn">按钮</button> -->
    <input type="text" v-model="obj.a" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello",
      obj: {
        a: "abc",
      },
    };
  },
  watch: {
    // nowValue 当前值, oldValue原始值
    //基本数据类型
    // msg(nowValue, oldValue) {
    //   console.log(nowValue, oldValue);
    // },
    msg: {
      handler(nowValue, oldValue) {
        console.log(nowValue, oldValue);
      },
      immediate: true,
    },
    //监视的是对象中的属性
    // "obj.a"(nowValue, oldValue) {
    //   // console.log(nowValue, oldValue);
    // },
    // 监视是整个对象 因为对象是引用类型 它的地址没有变，所以vue就认为这个对象没有被改变
    // obj(nowValue, oldValue) {
    //   console.log(nowValue, oldValue);
    // },
    // 如果只改变对象中的属性，监视整个对象默认是没有效果的 -> 深度监听
    obj: {
      handler(nowValue, oldValue) {
        console.log(nowValue, oldValue);
      },
      deep: true, //开启深度监听
      immediate: true, //开启第一次会调用 立即调用
    },
  },
  methods: {
    fn() {
      this.obj = { a: "abcd" };
    },
  },
};
</script>

<style scoped></style>
